<script lang="ts" setup>
import userHeader from '../userHeader.vue'
import uploadFile from '@/components/uploadFile.vue'
import utilsService from '@/api/utilsService'
import userService from '@/api/userService'

const userId = localStorage.getItem('userId')
const userPhotoFileType = '4'

let userProfile = reactive({
  data: {
    userName: '',
    authenticated: '',
    regPhoneNum: '',
    profilePhotoUrl: ''
  }
})
userService.profile({ userId }).then((res) => {
  userProfile.data = res.data.data
})
let profilePhoto = reactive({
  data: {
    FileUrl: ''
  }
})
userService.getProfilePhoto({ userId }).then((res) => {
  profilePhoto.data = res.data.data
})
const formLabelAlign: { [key: string]: any } = reactive({
  userPhoto: new Blob(),
  fileType: '',
  userId: ''
})
const srcObj: { [key: string]: any } = reactive({
  userPhoto: ''
})
const getUserPhoto = (file: Blob) => {
  const formData = new FormData()
  formData.append('file', file)
  formData.append('fileType', userPhotoFileType)
  formData.append('userId', localStorage.getItem('userId') as string)
  utilsService.uploadFile(formData).then((res) => {
    if (res.status === 200) {
      showImage(file, 'userPhoto')
      formLabelAlign.userPhoto = file
    }
  })
}
const showImage = (file: Blob, imgHander: string) => {
  let render = new FileReader()
  render.readAsDataURL(file)
  render.onload = function (e) {
    srcObj[imgHander] = this.result
  }
}
const clearImg = (imgHander: string) => {
  formLabelAlign[imgHander] = new Blob()
  srcObj[imgHander] = ''
}
const checkUserPhoto = (rule: any, value: Blob, callback: any) => {
  if (!value.size) {
    callback(new Error('请选择会员头像！'))
  } else {
    callback()
  }
}
watch(
  () => formLabelAlign.way,
  (n) => {
  }
)
</script>

<template>
  <el-row>
    <el-col :span="24">
      <user-header v-if="!userProfile.data.authenticated"></user-header>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="24">
      <div class="content-box">
        <div class="basics-box">
          <el-form label-width="120px" class="attestation" status-icon>
            <el-form-item label="会员头像" prop="userPhoto" style="padding-top: 50px">
              <span class="userInfo">
                <div v-if="Object.keys(profilePhoto.data.FileUrl ?? {}).length > 0">
                  <el-image class="photo" lazy :src="profilePhoto.data.FileUrl"
                    :preview-src-list="[profilePhoto.data.FileUrl]" />
                </div>

                <upload-file v-else @get-fils="getUserPhoto" :max-size="2">
                  <template v-slot:btn v-if="formLabelAlign.userPhoto.size">
                    <div style="position: relative">
                      <el-icon class="close" @click="clearImg('userPhoto')">
                        <Close />
                      </el-icon>
                      <el-image class="photo" id="userPhoto" :src="srcObj.userPhoto" :zoom-rate="1.2"
                        :preview-src-list="[srcObj.userPhoto]" :initial-index="4" fit="cover" />
                    </div>
                  </template>
                  <template v-slot:right>
                    <div class="description">JPG、jpeg或PNG格式，文件大小不超过10MB。</div>
                  </template>
                </upload-file>
              </span>
            </el-form-item>
            <el-form-item label="会员ID">
              <span class="userInfo">{{ userId }}</span>
            </el-form-item>
            <el-form-item label="客户名称">
              <span class="userInfo">{{ userProfile.data.userName }}</span>
            </el-form-item>
            <el-form-item label="认证信息">
              <span v-if="userProfile.data.authenticated" class="userInfo">已认证 </span>
              <span v-else class="userInfo">
                <div class="unauthorized-icon-background">
                  <svg-icon icon="subtract" class="unauthorized-icon"></svg-icon> 未认证
                  <router-link :to="{ name: 'PertificationInformation' }" class="action"> &nbsp 前往认证</router-link>
                </div>
              </span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-col>
    <!-- <el-col :span="6"> <flow-path></flow-path> </el-col> -->
  </el-row>
</template>

<style lang="scss" scoped>
.close {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 10;
  cursor: pointer;
}

.attestation {
  margin-left: 130px;
}

.el-row {
  margin-bottom: 20px;
}

.el-form-item {
  padding-top: 30px;
}

.action {
  color: #0247ea;
  text-decoration: none;
}

.content-box {
  background: $blank-color;
  height: 830px;

  .userInfo {
    padding-left: 30px;
  }

  .description {
    color: #9198a4;
  }

  .verification-title {
    height: 69px;
    display: flex;
    padding: 0 30px;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: $text-color;
    border-bottom: 1px solid $border-color;
    justify-content: space-between;

    .basics-box {
      margin: 0 auto;
      width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.photo {
  width: 76px;
  height: 76px;
  cursor: zoom-in;
}

.unauthorized-icon-background {
  overflow: hidden;
  background: white;
}

.unauthorized-icon {
  filter: drop-shadow(20px 0px 0px brown);
  border-right: 20px solid transparent;
  margin-left: -20px;
  margin-bottom: -3px;
}
</style>
